<template>
	<view>
		<view class="mainpadding4 dingwei" style="background-color: #2361ff;padding-bottom: 150rpx;">
			<image src="../static/image/system/jfbig.png" class="bigjf" mode=""></image>
			<view class="flexleft" @click="show=true">
				<view class="ershiba xiaobai">可用积分</view>
				<u-icon name="info-circle" color="#fff" size="16"></u-icon>
			</view>
			<view class="margin_top2 xiaobai fonweight" style="font-size: 80rpx;">{{userInfo.score || 0}}</view>
			<view class="flexleft margin_top2">
				<view class="jfbtn strongtext xiaobai" @click="jumpurl('/pages_homepage/jifenmx')">积分明细 ></view>
			</view>
		</view>
		<view class="maincontent mainpadding">
			<view class="flexcenter">
				<u-icon name="play-left-fill" color="#8daeff" size="12"></u-icon>
				<u-icon name="play-left-fill" class="margin_left1" color="#2361ff" size="12"></u-icon>
				<view class="sanshier xiaohei fonweight margin_left3 margin_right3">兑换商品</view>
				<u-icon name="play-right-fill" color="#2361ff" size="12"></u-icon>
				<u-icon name="play-right-fill" class="margin_left1" color="#8daeff" size="12"></u-icon>
			</view>
			<view class="mainpadding_top flexleft ffffff" v-for="item in list.data" :key="item.id"
				@click="tzspxq(item.id)">
				<image :src="item.image_text" class="leftListimg margin-right" mode=""></image>
				<view class="flexcolumnbet" style="width: 100%;height: 180rpx;">
					<view class="ershiba lianghang fonweight">{{item.title}}</view>
					<view class="flexbetween" style="width: 100%;">
						<view class="">
							<view class="xiaolan fonweight sanshier">{{item.price}}积分</view>
							<view class="xiaohui margin_top2 smalltext">已兑{{item.sales}}个</view>
						</view>
						<view class="duihuan xiaobai margin_top2 strongtext">兑换</view>
					</view>

				</view>
			</view>
		</view>
		<u-popup :show="show" round="20">
			<view class="mainpadding_top">
				<view class="sanshier fonweight flexcenter xiaohei">积分来源</view>
				<view class="xiaohui strongtext margin_top6">
					<u-parse :content="content"></u-parse>
				</view>
				<view class="margin_top5 flexcenter xiaohei sanshier" @click="show=false">关闭</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				content: "",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				userInfo:{}
			}
		},
		onLoad() {
			this.init()
			this.getsystem()
		},
		onShow() {
			this.userinfomsg()
		},
		methods: {
			getsystem(){
				httpRequest.request('/api/index/getConfigInfoItem', 'GET', {type:"scorely_des"}).then(res => {
					this.content = res.data
					
				})
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			// 跳转商品详情
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpxq?id=' + id
				})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/goods/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					is_scoregoods: 1
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style>
	page {
		background-color: #f7fbfe;
	}

	.duihuan {
		padding: 15rpx 36rpx;
		background-color: #3971ff;
		border-radius: 50rpx;
	}

	.leftListimg {
		width: 180rpx;
		min-width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.jfbtn {
		background-color: #3971ff;
		padding: 15rpx 30rpx;
		border-radius: 50rpx;
		border: 1rpx solid #fff;
	}

	.bigjf {
		width: 360rpx;
		height: 360rpx;
		position: absolute;
		right: 0;
		bottom: 0;
	}

	.maincontent {
		position: relative;
		top: -100rpx;
		background-color: #f7fbfe;
		border-radius: 50rpx 50rpx 0 0;
	}
</style>